<template>
    <div class="wl-page">
        <Row :gutter="20">
            <i-col :xs="12" :md="8" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
                <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                    <count-to :end="infor.count" count-class="count-style"/>
                    <p>{{ infor.title }}</p>
                </infor-card>
            </i-col>
        </Row>
        <two-tables></two-tables>
        <echart class="wl-echart"></echart>
    </div>
</template>

<script>
import inforCard from '@/components/info-card'
import CountTo from '@/components/count-to'
import TwoTables from './components/two-tables'
import echart from './components/echarts'
export default {
  components: {
    inforCard,
    CountTo,
    TwoTables,
    echart
  },
  data () {
    return {
      inforCardData: [
        { title: '车辆总数', icon: 'ios-clock-outline', count: 1885, color: '#ed3f14' },
        { title: '驾驶员总数', icon: 'md-list', count: 33434, color: '#9A66E4' },
        { title: '累计行驶里程', icon: 'ios-cafe', count: 13234, color: '#ff9900' },
        { title: '累计驾驶时常', icon: 'ios-brush', count: 23430, color: '#2d8cf0' }
      ]
    }
  }
}
</script>

<style lang="less">
    .wl-page{
        overflow-x:hidden;
    }
    .count-style{
        font-size: 50px;
    }
    .divider1 {
        margin: 5px 0px;
    }
    .wl-echart{
        margin-top: 10px;
    }
</style>
